<template>
    <n-config-provider :theme="getTheme"
                       :theme-overrides="getThemeOverrides"
                       :locale="zhCN"
                       :date-locale="dateZhCN">
        <n-loading-bar-provider>
            <n-dialog-provider>
                <n-notification-provider :max="3">
                    <n-message-provider>
                        <router-view/>
                    </n-message-provider>
                </n-notification-provider>
            </n-dialog-provider>
        </n-loading-bar-provider>
    </n-config-provider>



</template>

<script setup lang="ts">
import {useSystemStore} from "@/store/modules/useSystemStore"
import {useThrottle} from "@/hooks/useDebthro"
import {storeToRefs} from "pinia"
import {computed} from "vue"
import {useLighten} from "@/hooks/useColor"
import { zhCN, dateZhCN } from "naive-ui"

const {getTheme, themeColor} = storeToRefs(useSystemStore())

import { useMutationObserver } from '@vueuse/core';

// 修复 Naive UI 和 Tailwind 样式优先级引起的样式错误问题
useMutationObserver(
    document.head,
    () => {
        const naiveStyles = Array.from(
            document.head.querySelectorAll('style[cssr-id]')
        );

        if (
            naiveStyles.find((style) =>
                style.nextElementSibling
                    ? !style.nextElementSibling.hasAttribute('cssr-id')
                    : false
            )
        ) {
            naiveStyles.forEach((style) => {
                document.head.appendChild(style);
            });
        }
    },
    {
        childList: true,
    }
);

const getThemeOverrides = computed(() => {
    return {
        common: {
            primaryColor: themeColor?.value,
            primaryColorHover: useLighten(themeColor?.value as string, 6),
            primaryColorPressed: useLighten(themeColor?.value as string, 6),
        },
        LoadingBar: {
            colorLoading: themeColor?.value as string,
        },
    };
});

// 节流，可以适当增加时间
window.addEventListener("resize", useThrottle(() => {
    useSystemStore().setClientWidth(document.body.clientWidth)
    useSystemStore().setClientHeight(document.body.clientHeight)
}, 0))


</script>
